<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
@module Polymer Core Elements

`core-menu-button` is a `core-icon-button` that opens a drop-down menu
that allows the user to select an option. You can position the drop-down
menu with the `halign` and `valign` properties, or use CSS if more control
over positioning is desired.

Example:

    <core-menu-button id="btn">
         <core-item icon="settings" label="Settings"></core-item>
         <core-item icon="dialog" label="Dialog"></core-item>
         <core-item icon="search" label="Search"></core-item>
    </core-menu-button>

Style the drop-down by using the `core-menu-button::shadow #dropdown` selector:

    /* position this drop-down below the button, and style it white on black. */
    #btn::shadow #dropdown {
        top: 38px;
        color: #fff;
        background: #000;
    }

@class core-menu-button
@status beta
@homepage github.io
-->

<!--
Fired when an item's selection state is changed. This event is fired both
when an item is selected or deselected. The `isSelected` detail property
contains the selection state.

@event core-select
@param {Object} detail
  @param {boolean} detail.isSelected true for selection and false for deselection
  @param {Object} detail.item the item element
-->
<!--
Fired when an item element is tapped.

@event core-activate
@param {Object} detail
  @param {Object} detail.item the item element
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-dropdown/core-dropdown.html" rel="import">
<link href="../core-icon-button/core-icon-button.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">

<polymer-element name="core-menu-button" attributes="icon label src selected opened halign valign valueattr multi inlineMenu">
  <template>
    <link rel="stylesheet" href="core-menu-button.css">
    <core-icon-button id="button" on-tap="{{toggle}}" src="{{src}}" icon="{{icon}}" active="{{opened}}"><span>{{label}}</span></core-icon-button>
    <core-dropdown id="dropdown" relatedTarget="{{$.button}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}">
      <core-menu
          selected="{{selected}}"
          valueattr="{{valueattr}}"
          selectedClass="{{selectedClass}}"
          selectedProperty="{{selectedProperty}}"
          selectedAttribute="{{selectedAttribute}}"
          selectedItem="{{selectedItem}}"
          selectedModel="{{selectedModel}}"
          selectedIndex="{{selectedIndex}}"
          excludedLocalNames="{{excludedLocalNames}}"
          on-core-activate="{{closeAction}}">
        <content select="*"></content>
      </core-menu>
    </core-dropdown>
  </template>
  <script>
    Polymer('core-menu-button', {

      publish: {

        /**
         * The icon to display.
         * @attribute icon
         * @type string
         */
        icon: 'dots',

        src: '',

        /**
         * Set to true to open the menu.
         * @attribute opened
         * @type boolean
         */
        opened: false,

        /**
         * Set to true to cause the menu popup to be displayed inline rather
         * than in its own layer.
         * @attribute inlineMenu
         * @type boolean
         */
        inlineMenu: false,

        /**
         * Horizontally align the overlay with the button.
         * @attribute halign
         * @type string
         */
        halign: 'left',

        /**
         * Display the overlay on top or below the button.
         * @attribute valign
         * @type string
         */
        valign: 'top',

        /**
         * If true, the selection will persist when the menu is opened
         * and closed multiple times.
         *
         * @attribute stickySelection
         * @type boolean
         * @default false
         */
        stickySelection: false,

        /**
         * The index of the selected menu item.
         * @attribute selected
         * @type number
         */
        selected: '',

        /**
         * Specifies the attribute to be used for "selected" attribute.
         *
         * @attribute valueattr
         * @type string
         * @default 'name'
         */
        valueattr: 'name',

        /**
         * Specifies the CSS class to be used to add to the selected element.
         *
         * @attribute selectedClass
         * @type string
         * @default 'core-selected'
         */
        selectedClass: 'core-selected',

        /**
         * Specifies the property to be used to set on the selected element
         * to indicate its active state.
         *
         * @attribute selectedProperty
         * @type string
         * @default ''
         */
        selectedProperty: '',

        /**
         * Specifies the attribute to set on the selected element to indicate
         * its active state.
         *
         * @attribute selectedAttribute
         * @type string
         * @default 'active'
         */
        selectedAttribute: 'active',

        /**
         * Returns the currently selected element. In multi-selection this returns
         * an array of selected elements.
         * Note that you should not use this to set the selection. Instead use
         * `selected`.
         *
         * @attribute selectedItem
         * @type Object
         * @default null
         */
        selectedItem: null,

        /**
         * In single selection, this returns the model associated with the
         * selected element.
         * Note that you should not use this to set the selection. Instead use
         * `selected`.
         *
         * @attribute selectedModel
         * @type Object
         * @default null
         */
        selectedModel: null,

        /**
         * In single selection, this returns the selected index.
         * Note that you should not use this to set the selection. Instead use
         * `selected`.
         *
         * @attribute selectedIndex
         * @type number
         * @default -1
         */
        selectedIndex: -1,

        /**
         * Nodes with local name that are in the list will not be included
         * in the selection items.
         *
         * @attribute excludedLocalNames
         * @type string
         * @default ''
         */
        excludedLocalNames: ''

      },

      closeAction: function() {
        this.opened = false;
      },

      /**
       * Toggle the opened state of the dropdown.
       * @method toggle
       */
      toggle: function() {
        this.opened = !this.opened;
      },

      /**
       * The selected menu item.
       * @property selection
       * @type Node
       */
      get selection() {
        return this.$.menu.selection;
      },

      openedChanged: function() {
        if (this.opened && !this.stickySelection) {
          this.selected = null;
        }
      }

    });
  </script>
</polymer-element>
